<template>
    <div class="order-management">
        <a-card title="订单管理" :bordered="false">
            <!-- 搜索和操作栏 -->
            <div class="toolbar">
                <a-input-search v-model:value="searchKeyword" placeholder="搜索订单号/课程/用户"
                    style="width: 260px; margin-right: 16px;" @search="handleSearch" />
                <a-select v-model:value="filterStatus" placeholder="筛选状态" style="width: 120px; margin-right: 16px;"
                    allow-clear>
                    <a-select-option value="已支付">已支付</a-select-option>
                    <a-select-option value="待支付">待支付</a-select-option>
                    <a-select-option value="已取消">已取消</a-select-option>
                </a-select>
            </div>

            <!-- 订单列表表格 -->
            <a-table :columns="columns" :data-source="filteredOrders" row-key="id" :pagination="{ pageSize: 8 }"
                style="margin-top: 16px;">
                <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'status'">
                        <a-tag :color="getStatusColor(record.status)">{{ record.status }}</a-tag>
                    </template>
                    <template v-else-if="column.key === 'action'">
                        <a-popconfirm title="确定要删除该订单吗？" @confirm="deleteOrder(record.id)">
                            <a-button size="small" danger>删除</a-button>
                        </a-popconfirm>
                    </template>
                </template>
            </a-table>
        </a-card>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// mock数据
const orders = ref([
    { id: 1, orderNo: 'ORD202401001', course: 'AI智能体开发', user: '张三', amount: 999, status: '已支付', orderTime: '2024-01-15 10:30:00' },
    { id: 2, orderNo: 'ORD202401002', course: 'Vue3实战开发', user: '李四', amount: 399, status: '待支付', orderTime: '2024-01-16 14:20:00' },
    { id: 3, orderNo: 'ORD202401003', course: 'Java全栈开发', user: '王五', amount: 799, status: '已取消', orderTime: '2024-01-17 09:10:00' },
])

const searchKeyword = ref('')
const filterStatus = ref('')

const columns = [
    { title: '订单号', dataIndex: 'orderNo', key: 'orderNo' },
    { title: '课程', dataIndex: 'course', key: 'course' },
    { title: '用户', dataIndex: 'user', key: 'user' },
    { title: '金额', dataIndex: 'amount', key: 'amount' },
    { title: '状态', dataIndex: 'status', key: 'status' },
    { title: '下单时间', dataIndex: 'orderTime', key: 'orderTime' },
    { title: '操作', key: 'action' },
]

const getStatusColor = (status: string) => {
    const map: Record<string, string> = {
        '已支付': 'green',
        '待支付': 'orange',
        '已取消': 'red',
    }
    return map[status] || 'default'
}

const filteredOrders = computed(() => {
    return orders.value.filter(order => {
        const matchKeyword = !searchKeyword.value ||
            order.orderNo.includes(searchKeyword.value) ||
            order.course.includes(searchKeyword.value) ||
            order.user.includes(searchKeyword.value)
        const matchStatus = !filterStatus.value || order.status === filterStatus.value
        return matchKeyword && matchStatus
    })
})

const deleteOrder = (id: number) => {
    orders.value = orders.value.filter(o => o.id !== id)
}

const handleSearch = () => { }
</script>

<style scoped>
.order-management {
    padding: 24px;
}

.toolbar {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
</style>